<template>
  <div style="height: 100%;">
    <div v-loading="isLoading > 0" class="page-container">
      <el-card ref="appPageBody" class="app-page-body">
        <el-table height="100%" :data="configList" border size="mini">
          <el-table-column label="序号" type="index" />
          <el-table-column label="配置key" prop="c_key" />
          <el-table-column label="配置value" prop="c_value" />
          <el-table-column label="备注" prop="comment" />
          <el-table-column class-name="handle-body" label="操作" width="180">
            <template #default="{ row }">
              <el-button type="primary" @click="edit(row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <add-edit-contact-phone
      ref="AddEditContactPhone"
      :contact-phone="contactPhone"
      @refresh="getAllConfigList"
    />
    <add-edit-activity-list
      ref="AddEditActivityList"
      :activity-list="activityList"
      @refresh="getAllConfigList"
    />
    <add-edit-recharge-money
      ref="AddEditRechargeMoney"
      :recharge-money-list="rechargeMoneyList"
      @refresh="getAllConfigList"
    />
  </div>
</template>

<script>
import { getAllConfigList } from '@/api/config'
import AddEditContactPhone from './components/AddEditContactPhone.vue'
import AddEditActivityList from './components/AddEditActivityList.vue'
import AddEditRechargeMoney from './components/AddEditRechargeMoney.vue'
export default {
  name: 'ConfigList',
  components: {
    AddEditContactPhone,
    AddEditActivityList,
    AddEditRechargeMoney
  },
  props: {},
  data() {
    return {
      isLoading: 0,
      configList: [],
      activityList: [],
      rechargeMoneyList: [],
      contactPhone: ''
    }
  },
  async created() {
    this.getAllConfigList()
  },
  methods: {
    async getAllConfigList() {
      try {
        this.isLoading++
        this.configList = await getAllConfigList()
        // // 处理数据
        // const activityListJson = this.configList.filter(item => item.c_key === 'activity_list').c_value
        // this.activityList = activityListJson ? JSON.parse(activityListJson) : undefined
        // this.rechargeMoneyList = JSON.parse(this.configList.filter(item => item.c_key === 'recharge_money_list').c_value)
        // this.contactPhone = this.configList.filter(item => item.c_key === 'contact_phone').c_value
      } finally {
        this.isLoading--
      }
    },
    edit(row) {
      switch (row.c_key) {
        case 'contact_phone': this.$refs.AddEditContactPhone.open(row); break
        case 'activity_list': this.$refs.AddEditActivityList.open(row); break
        case 'recharge_money_list': this.$refs.AddEditRechargeMoney.open(row); break
      }
    }

  }
}
</script>

<style lang="scss" scoped>
</style>
